.clock{
    position: relative;
    width:300px;
    height:300px;
    margin: 40px;
}
.clock-bp{
    border: 4px solid #777;
    width: 100%;
    height: 100%;
  
    border-radius: 50%;
    position: relative;
}
.clock-bp > div{
    height: 100%;
    width:4px;
    background-color: #777;
    position: absolute;
    left: 50%;
    margin-left: -2px;
}
.clock-bp >div:nth-child(2){
    transform: rotate(30deg);
}
.clock-bp >div:nth-child(3){
    transform: rotate(60deg);
}
.clock-bp >div:nth-child(4){
    transform: rotate(90deg);
}
.clock-bp >div:nth-child(5){
    transform: rotate(120deg);
}
.clock-bp >div:nth-child(6){
    transform: rotate(150deg);
}
.clock-bp::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #fff;
    border-radius: 50%;
    -webkit-transform: scale(.8);
    transform: scale(.8);
}
.clock-dot{
    width:20px;
    height:20px;
    background-color: #777;
    border-radius: 50%;
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
}
.clock-point-hours{
    width:8px;
    height:30%;
    background-color: #777;
    border-radius: 10px;
    position: absolute;
    top:50%;
    left: 50%;
    transform-origin:50% 0;
}
.clock-point-minutes{
    width:5px;
    height:40%;
    background-color: #777;
    border-radius: 10px;
    position: absolute;
    top:50%;
    left: 50%;
    transform-origin:50% 0;
    
}
.clock-point-seconds{
    width:3px;
    height: 50%;
    background-color:red;
    border-radius: 10px;
    position: absolute;
    top:50%;
    left: 50%;
    
    transform-origin: 50% 0;
}
.clock-number{
    margin: 20px 50%;
    position: absolute;
    transform:translate(-50%,0);
    transform-origin:50% 0;
}
